<script setup name="Demo">
import { reactive, ref } from "vue";
import { language } from "@/enums/language";
import { useAppStore } from "@/store/modules/app";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const useApp = useAppStore();

const contentList = reactive([
  "✔ ⚡ Vue3 + Vite4",
  "✔ ✨ Vant4 组件库",
  "✔ 🌀 Tailwindcss 原子类框架",
  "✔ 🍍 Pinia 状态管理",
  "✔ 🌓 支持深色模式",
  "✔ Vue-router 4",
  "✔ 支持 SVG 图标自动注册组件",
  "✔ vmin 视口适配",
  "✔ Axios 封装",
  "✔ 打包资源 gzip 压缩",
  "✔ 开发环境支持 Mock 数据",
  "✔ ESLint",
  "✔ 首屏加载动画",
  "✔ 开发环境调试面板"
]);

const lang = ref(useApp.language);

watch(
  () => lang.value,
  newVal => {
    useApp.setLanguage(newVal);
  }
);

const onConfirm = value => {
  const val = value.selectedValues[0];
  locale.value = val;
  lang.value = val;
};
</script>

<template>
  <div class="demo-content px-[12px]">
    {{ $t("home") }}
    <van-picker
      title="标题"
      :model-value="[lang]"
      :columns="language"
      @confirm="onConfirm"
    />
    <div
      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
    >
      <p class="my-[14px] leading-[24px]">
        基于 Vue3 全家桶、TypeScript、Vite 构建工具，开箱即用的 H5
        移动端项目基础模板<svg-icon name="check-in" />
      </p>
    </div>

    <div class="demo-main">
      <van-cell v-for="(item, idx) in contentList" :key="idx" :title="item" />
    </div>
  </div>
</template>
